<template>
	<div class="backImg">
		<el-card class="box-card loginpanel">
			<div slot="header" class="clearfix">
				<el-row>
					<el-col :span="6">
						<img src="../assets/loginImg.png" class="myimg">
					</el-col>
					<el-col :span="16">
						<span class="myspan">
							CRM管理系统</span>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-form ref="loginForm" :rules="rules" @keyup.enter.native="submitForm()" hide-required-asterisk
					:model="loginForm" label-width="80px">
					<el-form-item label="用户名" prop="userAccount">
						<el-input v-model="loginForm.userAccount" clearable suffix-icon="el-icon-user"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userPassword">
						<el-input v-model="loginForm.userPassword" clearable show-password suffix-icon="el-icon-lock">
						</el-input>
					</el-form-item>
					<el-form-item label="验证码">
						<div>
							<el-input v-model="loginForm.code" clearable style="width: 230px;float: left;"></el-input>
							<img @click="flushCode" style="height: 40px;float: left;margin-left: 5px;" :src="codeUrl" />
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm()">登录</el-button>
						<el-button @click="resetForm()">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				codeUrl: '',
				loginForm: {
					userAccount: "",
					userPassword: "",
					code: "",
					uuid: ''
				},
				rules: {
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 6,
							max: 8,
							message: "长度在 6 到 8 个字符",
							trigger: "blur"
						},
					],
				},
			};
		},
		created() {
			//进入页面请求接口，获取验证码
			this.flushCode();
			this.value.b = ["zhinan","shejiyuanze","yizhi"];
			// this.value.b.push("zhinan")
			// this.value.b.push("shejiyuanze")
			// this.value.b.push("yizhi")
		},
		mounted() {
			if (this.$route.query.data == 50000) {
				this.$message.warning(this.$route.query.msg);
			}
		},
		methods: {
			flushCode() {
				this.$axios.get('/verifyCode?r=' + Math.random()).then(res => {
					if (res?.code == 20000) {
						this.codeUrl = "data:image/gif;base64," + res.data.img
						this.loginForm.uuid = res.data.uuid
					}
				})
			},

			resetForm() {
				this.$refs.loginForm.resetFields();
			},
			submitForm() {
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						this.$axios.post("/doLogin", this.loginForm)
							.then(respInfo => {
								if (respInfo.code == 20000) {
									this.$message.success(respInfo.msg);
									debugger;
									localStorage.setItem("userName", respInfo.data.user.user.userName);
									localStorage.setItem("userId", respInfo.data.user.user.userId);
									window.sessionStorage.setItem("admin_token", respInfo.data.token);
									window.sessionStorage.setItem("loginuser",JSON.stringify(respInfo.data.user));
									
									this.$router.push({
										path: '/main',
									});
								} else {
									this.$message.error(respInfo.msg);
									this.flushCode();
									this.loginForm.code = '';
								}
							});
					} else {
						return false;
					}
				});
			}
		},

	};
</script>

<style>
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both;
	}

	.clearfix {
		text-align: center;
		height: 72px;
	}

	.box-card {
		width: 480px;
		top: 30px;
	}

	.loginpanel {
		margin: 200px auto;
	}

	.myimg {
		width: 68px;
		height: 68px;
	}

	.myspan {
		margin-top: 15px;
		text-align: center;
		display: block;
		font-size: 25px;
	}

	.el-card__header {
		padding: 0px 20px;

	}
</style>
